<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter—APP内存测试》 - Lucklyの博客 - 在阅读中遇见自己</title><meta name="Description" content="早起的年轻人做的网站"><meta property="og:title" content="《Flutter—APP内存测试》" />
<meta property="og:description" content="
本文主要介绍flutter 应用内存测试数据。
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://luckly.work/flutterapp%E5%86%85%E5%AD%98%E6%B5%8B%E8%AF%95/" />
<meta property="og:image" content="https://luckly.work/logo.png"/>
<meta property="article:published_time" content="2021-06-15T18:24:54+08:00" />
<meta property="article:modified_time" content="2021-06-15T18:24:54+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://luckly.work/logo.png"/>

<meta name="twitter:title" content="《Flutter—APP内存测试》"/>
<meta name="twitter:description" content="
本文主要介绍flutter 应用内存测试数据。
"/>
<meta name="application-name" content="LoveIt">
<meta name="apple-mobile-web-app-title" content="LoveIt"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://luckly.work/flutterapp%E5%86%85%E5%AD%98%E6%B5%8B%E8%AF%95/" /><link rel="prev" href="https://luckly.work/%E5%B0%91%E6%9C%89%E4%BA%BA%E8%B5%B0%E7%9A%84%E8%B7%AF/" /><link rel="next" href="https://luckly.work/%E5%9C%A8flutter%E4%B8%AD%E6%9E%84%E4%BB%B6%E8%81%8A%E5%A4%A9%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter—APP内存测试》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/luckly.work\/flutterapp%E5%86%85%E5%AD%98%E6%B5%8B%E8%AF%95\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/luckly.work\/images\/Apple-Devices-Preview.png",
                            "width":  3200 ,
                            "height":  2048 
                        }],"genre": "posts","keywords": "flutter","wordcount":  2357 ,
        "url": "https:\/\/luckly.work\/flutterapp%E5%86%85%E5%AD%98%E6%B5%8B%E8%AF%95\/","datePublished": "2021-06-15T18:24:54+08:00","dateModified": "2021-06-15T18:24:54+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": {
                    "@type": "ImageObject",
                    "url": "https:\/\/luckly.work\/images\/avatar.png",
                    "width":  528 ,
                    "height":  560 
                }},"author": {
                "@type": "Person",
                "name": "早起的年轻人"
            },"description": ""
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">Lucklyの博客 - 在阅读中遇见自己</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/posts/">所有文章</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/flutter/">Flutter</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/read/">读书笔记</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/go/">Go</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/tags/">标签</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/">分类</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="https://github.com/ITmxs">Github</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/friend/">友链</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter—APP内存测试》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>早起的年轻人</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-06-15">2021-06-15</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 2357 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 5 分钟&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#内存测试一---简单-ui">内存测试一 - 简单 UI</a>
      <ul>
        <li><a href="#数据一">数据一</a></li>
        <li><a href="#数据二">数据二</a></li>
      </ul>
    </li>
    <li><a href="#内存测试二---分配大对象">内存测试二 - 分配大对象</a></li>
    <li><a href="#内存测试三---显示图片">内存测试三 - 显示图片</a></li>
    <li><a href="#内存测试四---预加载图片">内存测试四 - 预加载图片</a></li>
    <li><a href="#内存测试五---启动多个-flutter-引擎">内存测试五 - 启动多个 Flutter 引擎</a></li>
    <li><a href="#测试结论">测试结论</a></li>
    <li><a href="#优化方向">优化方向</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍flutter 应用内存测试数据。</p>
</blockquote>
<h1 id="内存测试一---简单-ui">内存测试一 - 简单 UI</h1>
<p>分别<strong>使用 Android 和 Flutter 实现最简单的界面</strong>。</p>
<ul>
<li>显示一个文本</li>
<li>显示一个图片</li>
</ul>
<p>使用 TextView 显示 “Hello World!” 的 Android Demo，布局如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">&lt;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&gt;
&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=&#34;http://schemas.android.com/apk/res/android&#34;
    xmlns:app=&#34;http://schemas.android.com/apk/res-auto&#34;
    xmlns:tools=&#34;http://schemas.android.com/tools&#34;
    android:layout_width=&#34;match_parent&#34;
    android:layout_height=&#34;match_parent&#34;
    tools:context=&#34;.MainActivity&#34;&gt;

    &lt;TextView
        android:layout_width=&#34;wrap_content&#34;
        android:layout_height=&#34;wrap_content&#34;
        android:text=&#34;Hello World!&#34;
        app:layout_constraintBottom_toBottomOf=&#34;parent&#34;
        app:layout_constraintLeft_toLeftOf=&#34;parent&#34;
        app:layout_constraintRight_toRightOf=&#34;parent&#34;
        app:layout_constraintTop_toTopOf=&#34;parent&#34; /&gt;

&lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
</code></pre></td></tr></table>
</div>
</div><p>使用 Text Widget 显示 “Hello World!” 的 Flutter Demo，代码如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Center(child: Text(&#39;Hello World!&#39;)),
</code></pre></td></tr></table>
</div>
</div><p>显示图片的 Demo 非常类似，这里略过。</p>
<p>测试数据显示：<strong>Flutter 应用比原生应用占用更多内存，多出来的部分主要包括 Other、Code、Native、Graphics</strong>。(注意：Android Studio 中无法正常显示 Other 部分变化，<code>adb shell dumpsys meminfo</code> 及 Flutter DevTools 中可正常观察到)</p>
<p>以下是具体测试数据。</p>
<h2 id="数据一">数据一</h2>
<p>机型及配置：华为 Nova 2，Android 8.0，分辨率480dp(3x)。</p>
<p>Android Text Demo
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944369530168.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944369530168.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944369530168.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944369530168.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944369530168.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944406815956.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944406815956.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944406815956.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944406815956.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944406815956.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408053563.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408053563.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408053563.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408053563.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408053563.jpg"
        title="img" /></p>
<p>Android Image Demo
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944370128933.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944370128933.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944370128933.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944370128933.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944370128933.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944407225565.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944407225565.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944407225565.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944407225565.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944407225565.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408363481.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408363481.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408363481.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408363481.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408363481.jpg"
        title="img" /></p>
<p>Flutter Text Demo
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944384753825.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944384753825.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944384753825.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944384753825.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944384753825.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408943099.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408943099.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408943099.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408943099.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944408943099.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944440141932.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944440141932.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944440141932.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944440141932.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944440141932.jpg"
        title="img" /></p>
<p>Flutter Image Demo
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944385231943.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944385231943.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944385231943.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944385231943.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944385231943.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944409251967.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944409251967.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944409251967.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944409251967.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944409251967.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944440514423.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944440514423.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944440514423.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944440514423.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944440514423.jpg"
        title="img" /></p>
<h2 id="数据二">数据二</h2>
<p>机型及配置：小米 8，分辨率440dp(2.8x)</p>
<p>Android Text Demo
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944403017361.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944403017361.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944403017361.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944403017361.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944403017361.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944441459158.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944441459158.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944441459158.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944441459158.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944441459158.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443093212.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443093212.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443093212.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443093212.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443093212.jpg"
        title="img" /></p>
<p>Android Image Demo
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944404063442.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944404063442.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944404063442.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944404063442.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944404063442.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944441807084.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944441807084.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944441807084.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944441807084.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944441807084.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443368308.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443368308.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443368308.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443368308.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443368308.jpg"
        title="img" /></p>
<p>Flutter Text Demo
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944399044259.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944399044259.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944399044259.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944399044259.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944399044259.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944442195175.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944442195175.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944442195175.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944442195175.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944442195175.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443788400.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443788400.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443788400.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443788400.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944443788400.jpg"
        title="img" /></p>
<p>Flutter Image Demo
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944399984819.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944399984819.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944399984819.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944399984819.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944399984819.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944442627978.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944442627978.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944442627978.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944442627978.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944442627978.jpg"
        title="img" />
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944444195039.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944444195039.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944444195039.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944444195039.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15944444195039.jpg"
        title="img" /></p>
<h1 id="内存测试二---分配大对象">内存测试二 - 分配大对象</h1>
<p>持续在 Dart 代码中分配对象。观察内存变化。</p>
<p>测试数据显示：<strong>从 Android 角度看，Dart Heap 中分配的对象归类为 “Private Other” 内存</strong></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">List&lt;Uint8List&gt; _memList = List();

void _addToMemList() {
    // 点击一次, 分配 10MB 内存
    _memList.add(_createData(10 * 1024 * 1024));
}
</code></pre></td></tr></table>
</div>
</div><p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15945451536123.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15945451536123.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15945451536123.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15945451536123.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15945451536123.jpg"
        title="-w1428" /></p>
<p>随着分配的 Dart 对象，Dart 内存和 Android 内存都在增加</p>
<ul>
<li>左图是 Dart 内存
<ul>
<li>Dart Heap Capacity (绿线区域)一直在增长</li>
<li>Dart Heap Used (浅蓝色区域)一直在增长</li>
<li>Dart External (蓝色区域)几乎不变</li>
</ul>
</li>
<li>右图是 Android 内存
<ul>
<li>Total (绿线)一直在增长</li>
<li>Other (紫线)一直在增长</li>
<li>其他几乎不变</li>
</ul>
</li>
</ul>
<h1 id="内存测试三---显示图片">内存测试三 - 显示图片</h1>
<p>持续在 Dart 代码中<strong>加载并显示</strong>本地图片(1024x1024)。观察内存变化。</p>
<p>测试数据显示：<strong>Flutter 应用中图片在 Graphics 内存中分配</strong></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947280277523.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947280277523.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947280277523.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947280277523.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947280277523.jpg"
        title="-w1666" /></p>
<p>随着加载和显示的图片增多，Dart 内存和 Android 内存都在增加</p>
<ul>
<li>左图是 Dart 内存
<ul>
<li>Dart Heap Capacity (绿线区域)一直在增长</li>
<li>Dart Heap Used (浅蓝色区域)几乎不变</li>
<li>Dart External (蓝色区域)一直在增长</li>
</ul>
</li>
<li>右图是 Android 内存
<ul>
<li>Total (绿线)一直在增长</li>
<li>Graphics (橙色区域)波浪形增长</li>
<li>其他几乎不变</li>
</ul>
</li>
</ul>
<h1 id="内存测试四---预加载图片">内存测试四 - 预加载图片</h1>
<p>持续在 Dart 代码中<strong>预加载但不显示</strong>本地图片(1024x1024)。观察内存变化。</p>
<p>测试数据显示：<strong>Flutter 应用中图片在 Graphics 内存中分配</strong></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947294740934.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947294740934.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947294740934.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947294740934.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947294740934.jpg"
        title="-w1294" /></p>
<p>随着预加载的图片增多，Dart 内存和 Android 内存都在增加</p>
<ul>
<li>左图是 Dart 内存
<ul>
<li>Dart Heap Capacity (绿线区域)一直在增长</li>
<li>Dart Heap Used (浅蓝色区域)几乎不变</li>
<li>Dart External (蓝色区域)一直在增长</li>
</ul>
</li>
<li>右图是 Android 内存
<ul>
<li>Total (绿线)一直在增长</li>
<li>Graphics (橙色区域)波浪形增长</li>
<li>其他几乎不变</li>
</ul>
</li>
</ul>
<h1 id="内存测试五---启动多个-flutter-引擎">内存测试五 - 启动多个 Flutter 引擎</h1>
<p>持续启动 Flutter 引擎，每次增加一个。观察内存变化。</p>
<p>测试数据显示：<strong>每开启一个 Flutter 引擎，Native 内存大约有5-6MB增长，Private Other 有10MB左右增长</strong></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947866240369.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947866240369.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947866240369.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947866240369.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947866240369.jpg"
        title="-w1302" /></p>
<p>随着 Flutter 引擎数量增多，Dart 内存和 Android 内存都在增加</p>
<ul>
<li>左图是 Dart 内存
<ul>
<li>Dart Heap Used (浅蓝色区域)几乎不变</li>
<li>Dart External (蓝色区域)一直在增长</li>
</ul>
</li>
<li>右图是 Android 内存
<ul>
<li>Total (绿线)一直在增长</li>
<li>Other (紫色区域)一直在快速增长</li>
<li>Native (蓝色区域)一直在较快增长</li>
<li>Graphics (橙色区域)无增长</li>
</ul>
</li>
</ul>
<p>在 Android Studio 中测试结果如下：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947848408890.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947848408890.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947848408890.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947848408890.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947848408890.jpg"
        title="img" /></p>
<p>随着 Flutter 引擎数量增多，</p>
<ul>
<li>Private Other 一直在增长 (注：注意：Android Studio 中无法正常显示 Other 部分变化，<code>adb shell dumpsys meminfo</code> 及 Flutter DevTools 中可正常观察到)</li>
<li>Native 内存(蓝色区域)一直在增长</li>
</ul>
<h1 id="测试结论">测试结论</h1>
<ul>
<li>Flutter 应用比原生应用占用更多内存，多出来的部分主要包括 Other、Code、Native、Graphics <a href="https://developer.android.com/studio/profile/memory-profiler#how-counted" target="_blank" rel="noopener noreffer">内存分类</a> <a href="https://developer.android.com/studio/command-line/dumpsys#meminfo" target="_blank" rel="noopener noreffer">meminfo</a></li>
<li>从 Android 角度看，Dart Heap 属性 “Private Other” 内存。Dart 中创建对象会导致 Private Other 内存增长</li>
<li>Flutter 应用中图片在 Graphics 内存中分配 <a href="https://www.yuque.com/xytech/flutter/avmyht" target="_blank" rel="noopener noreffer">闲鱼技术 Android Flutter实践内存初探</a></li>
<li>每开启一个 Flutter 引擎，Native 内存大约有5-6MB增长，Private Other 有10MB左右增长</li>
</ul>
<p>为什么 Flutter 应用会比原生应用占用更多内存？官网给出的一些数据也许能解释部分原因。以下翻译自 <a href="https://flutter.dev/docs/development/add-to-app/performance#memory-and-latency" target="_blank" rel="noopener noreffer">Load sequence, performance, and memory - Flutter</a></p>
<blockquote>
<p>展示 Flutter UI 会有一定不可忽视的延迟。可以提前启动 Flutter 引擎来减少这个延迟。</p>
<p>集成 Flutter 到已有应用时要评估预加载 Flutter 引擎(即，加载 Flutter 库、启动 Dart VM、运行 isolate 入口程序)带来的内存开销及延迟。</p>
<p>在 2015 年的一款低端手机上，Flutter v1.10.3 release-AOT 模式下预热 <code>FlutterEngine</code> 开销如下：</p>
<ul>
<li><strong>Android</strong> 42 MB 和 1530 ms。其中有 330 ms 会阻塞主线程</li>
<li><strong>iOS</strong> 22 MB 和 860 ms。其中有 260 ms 会阻塞主线程</li>
</ul>
<p>内存方面，一个测试样本数据如下(根据使用场景会有所变化)</p>
<ul>
<li>~4 MB OS’s memory usage for creating pthreads.</li>
<li>~10 MB GPU driver memory.</li>
<li>~1 MB for Dart runtime-managed memory.</li>
<li>~5 MB for Dart-loaded font maps.</li>
</ul>
<p>延迟方面，一个测试样本数据如下(根据使用场景会有所变化)</p>
<ul>
<li>~20 ms to collect the Flutter assets from the application package.</li>
<li>~15 ms to dlopen the Flutter engine library.</li>
<li>~200 ms to create the Dart VM and load the AOT snapshot.</li>
<li>~200 ms to load Flutter-dependent fonts and assets.</li>
<li>~400 ms to run the entrypoint, create the first widget tree, and compile the needed GPU shader programs.</li>
</ul>
<p>预热 Flutter 引擎的时机应该足够晚，以减小内存占用；同时还要足够早，以避免 Flutter 引擎启动时间跟首帧延迟叠加在一起(否则会感觉启动慢，体验非常糟糕)</p>
<p>具体预热时机要根据应用的实际结构来决定。通常经验是在将显示 Flutter 页面的前一个页面中预热</p>
<p>假设引擎已经预热，关联 UI 时的首帧开销如下：</p>
<ul>
<li><strong>Android</strong> 320 ms 以及额外的 12 MB (跟屏幕的物理像素尺寸非常相关，physical pixel size)</li>
<li><strong>iOS</strong> 200 ms 以及额外的 16 MB (跟屏幕的物理像素尺寸非常相关，physical pixel size)</li>
</ul>
<p>内存方面，开销主要来自用于渲染的 graphical memory buffer (跟屏幕尺寸相关)</p>
<p>延迟方面，开销主要是等原生系统回调(提供 surface)以及编译 shader 程序(原文: compiling the remaining shader programs that are not pre-emptively predictable)的时间。这里的延迟仅在第一帧</p>
<p>Flutter UI 释放后，相关内存也会释放。这里的内存释放跟 <code>FlutterEngine</code> 中的 Flutter State 无关，除非 <code>FlutterEngine</code> 也释放了</p>
</blockquote>
<h1 id="优化方向">优化方向</h1>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947301347638.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947301347638.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947301347638.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947301347638.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947301347638.jpg"
        title="img" /></p>
<p>Flutter 应用内存可优化的点分别是：</p>
<ul>
<li>Private Others，Dart 代码分配的对象属于这一类。优化点是减少 Dart 代码中不必要的对象分配，尤其是大对象</li>
<li>Code - 用于处理代码和资源，如 dex 字节码，so 库和字体。优化点是减少 <code>libflutter.so</code> 和 <code>libapp.so</code> 大小</li>
<li>Graphics - 图形缓冲区队列向屏幕显示像素（包括 GL 表面、GL 纹理等等）所使用的内存。比较好入手的一个优化是减少 Dart 代码中图片占用的内存。另外可以考虑优化 Flutter UI 这一块(同样使用 skia，为什么 Android 原生 UI 占用的内存比 Flutter UI 少？)</li>
<li>Native - C 或 C++ 代码分配的对象的内存。优化点是减少 Flutter 引擎占用的内存，比如单引擎比多引擎使用更少的内存</li>
</ul>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947874114688.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947874114688.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947874114688.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947874114688.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2020/07/15/15947874114688.jpg"
        title="-w1261" /></p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-06-15</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="https://luckly.work/flutterapp%E5%86%85%E5%AD%98%E6%B5%8B%E8%AF%95/" data-title="《Flutter—APP内存测试》" data-hashtags="flutter"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://luckly.work/flutterapp%E5%86%85%E5%AD%98%E6%B5%8B%E8%AF%95/" data-hashtag="flutter"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Hacker News" data-sharer="hackernews" data-url="https://luckly.work/flutterapp%E5%86%85%E5%AD%98%E6%B5%8B%E8%AF%95/" data-title="《Flutter—APP内存测试》"><i class="fab fa-hacker-news fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="https://luckly.work/flutterapp%E5%86%85%E5%AD%98%E6%B5%8B%E8%AF%95/" data-title="《Flutter—APP内存测试》"><i data-svg-src="https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="https://luckly.work/flutterapp%E5%86%85%E5%AD%98%E6%B5%8B%E8%AF%95/" data-title="《Flutter—APP内存测试》" data-image="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"><i class="fab fa-weibo fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/%E5%B0%91%E6%9C%89%E4%BA%BA%E8%B5%B0%E7%9A%84%E8%B7%AF/" class="prev" rel="prev" title="《少有人走的路》"><i class="fas fa-angle-left fa-fw"></i>《少有人走的路》</a>
            <a href="/%E5%9C%A8flutter%E4%B8%AD%E6%9E%84%E4%BB%B6%E8%81%8A%E5%A4%A9%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/" class="next" rel="next" title="《在Flutter中构件聊天应用程序》">《在Flutter中构件聊天应用程序》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">早起的年轻人</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"cookieconsent":{"content":{"dismiss":"同意","link":"了解更多","message":"本网站使用 Cookies 来改善您的浏览体验."},"enable":true,"palette":{"button":{"background":"#f0f0f0"},"popup":{"background":"#1aa3ff"}},"theme":"edgeless"},"search":{"algoliaAppID":"PASDMWALPK","algoliaIndex":"index.zh-cn","algoliaSearchKey":"b42948e51daaa93df92381c8e2ac0f93","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
